<template>
	<view :style="warpCss">
		<view :style="maskLayer"></view>
		<view :class="['rubik-cube relative', diyStore.mode]">

			<!-- 1左2右 -->
			<template v-if="diyComponent.mode == 'row1-lt-of2-rt'">
				<view class="template-left">
					<view @click="diyStore.toRedirect(diyComponent.list[0].link)" :class="['item', diyComponent.mode]"
						:style="{ marginRight: diyComponent.imageGap * 2 + 'rpx', width: diyComponent.list[0].imgWidth, height: diyComponent.list[0].imgHeight + 'px' }">
						<image v-if="diyComponent.list[0].imageUrl" :src="img(diyComponent.list[0].imageUrl)" mode="scaleToFill"
							class="item-image" :style="diyComponent.list[0].pageItemStyle" :show-menu-by-longpress="true" />
						<image v-else :src="img('static/resource/images/diy/figure.png')" mode="scaleToFill" class="item-image"
							:style="diyComponent.list[0].pageItemStyle" :show-menu-by-longpress="true" />
					</view>
				</view>

				<view class="template-right">
					<template v-for="(item, index) in diyComponent.list" :key="index">
						<template v-if="index > 0">
							<view @click="diyStore.toRedirect(item.link)" :class="['item', diyComponent.mode]"
								:style="{ marginBottom: diyComponent.imageGap * 2 + 'rpx', width: item.imgWidth, height: item.imgHeight + 'px' }">
								<image v-if="item.imageUrl" :src="img(item.imageUrl)" mode="scaleToFill" :style="item.pageItemStyle"
									class="item-image" :show-menu-by-longpress="true" />
								<image v-else :src="img('static/resource/images/diy/figure.png')" mode="scaleToFill" class="item-image"
									:style="item.pageItemStyle" :show-menu-by-longpress="true" />
							</view>
						</template>
					</template>
				</view>
			</template>

			<!-- 1左3右 -->
			<template v-else-if="diyComponent.mode == 'row1-lt-of1-tp-of2-bm'">
				<view class="template-left">
					<view @click="diyStore.toRedirect(diyComponent.list[0].link)" :class="['item', diyComponent.mode]"
						:style="{ marginRight: diyComponent.imageGap * 2 + 'rpx', width: diyComponent.list[0].imgWidth, height: diyComponent.list[0].imgHeight + 'px' }">
						<image v-if="diyComponent.list[0].imageUrl" :src="img(diyComponent.list[0].imageUrl)" mode="scaleToFill"
							:style="diyComponent.list[0].pageItemStyle" :show-menu-by-longpress="true" class="item-image" />
						<image v-else :src="img('static/resource/images/diy/figure.png')" mode="scaleToFill"
							:style="diyComponent.list[0].pageItemStyle" :show-menu-by-longpress="true" class="item-image" />
					</view>
				</view>

				<view class="template-right">
					<view @click="diyStore.toRedirect(diyComponent.list[1].link)" :class="['item', diyComponent.mode]"
						:style="{ marginBottom: diyComponent.imageGap * 2 + 'rpx', width: diyComponent.list[1].imgWidth, height: diyComponent.list[1].imgHeight + 'px' }">
						<image v-if="diyComponent.list[1].imageUrl" :src="img(diyComponent.list[1].imageUrl)" mode="scaleToFill"
							:style="diyComponent.list[1].pageItemStyle" :show-menu-by-longpress="true" class="item-image" />
						<image v-else :src="img('static/resource/images/diy/figure.png')" mode="scaleToFill"
							:style="diyComponent.list[1].pageItemStyle" :show-menu-by-longpress="true" class="item-image" />
					</view>
					<view class="template-bottom">
						<template v-for="(item, index) in diyComponent.list" :key="index">
							<template v-if="index > 1">
								<view @click="diyStore.toRedirect(item.link)" :class="['item', diyComponent.mode]" :style="{
									marginRight: diyComponent.imageGap * 2 + 'rpx',
									width: item.imgWidth,
									height: item.imgHeight + 'px'
								}">
									<image v-if="item.imageUrl" :src="img(item.imageUrl)" mode="scaleToFill" class="item-image"
										:style="item.pageItemStyle" :show-menu-by-longpress="true" />
									<image v-else :src="img('static/resource/images/diy/figure.png')" mode="scaleToFill"
										class="item-image" :style="item.pageItemStyle" :show-menu-by-longpress="true" />
								</view>
							</template>
						</template>
					</view>
				</view>
			</template>

			<template v-else>
				<view :class="['item', diyComponent.mode]" v-for="(item, index) in diyComponent.list" :key="index"
					@click="diyStore.toRedirect(item.link)"
					:style="{ marginRight: diyComponent.imageGap * 2 + 'rpx', marginBottom: diyComponent.imageGap * 2 + 'rpx', width: item.widthStyle, height: item.imgHeight + 'px' }">
					<image v-if="item.imageUrl" :src="img(item.imageUrl)" :mode="'scaleToFill'" :style="item.pageItemStyle"
						:show-menu-by-longpress="true" class="item-image" />
					<image v-else :src="img('static/resource/images/diy/figure.png')" :mode="'scaleToFill'"
						:style="item.pageItemStyle" :show-menu-by-longpress="true" class="item-image" />
				</view>
			</template>

		</view>
	</view>
</template>

<script setup lang="ts">
// 魔方
import { ref, onMounted, computed, watch, nextTick, getCurrentInstance } from 'vue';
import useDiyStore from '@/app/stores/diy';
import { img } from '@/utils/common';

const props = defineProps(['component', 'index', 'pullDownRefreshCount']);

const diyStore = useDiyStore();

const diyComponent = computed(() => {
	if (diyStore.mode == 'decorate') {
		return diyStore.value[props.index];
	} else {
		return props.component;
	}
})

/**
 * 处理rpx渲染之后变成rem存在小数的问题
 * @param rpx
 */
const upx2px = (rpx: number) => {
	return uni.upx2px(rpx) + 1
}

const warpCss = computed(() => {
	var style = '';
	style += 'position:relative;';
	if (diyComponent.value.componentStartBgColor) {
		if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
		else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
	}

	if (diyComponent.value.componentBgUrl) {
		style += `background-image:url('${img(diyComponent.value.componentBgUrl)}');`;
		style += 'background-size: cover;background-repeat: no-repeat;';
	}

	if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
	if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
	if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
	if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
	return style;
})

// 背景图加遮罩层
const maskLayer = computed(() => {
	var style = '';
	if (diyComponent.value.componentBgUrl) {
		style += 'position:absolute;top:0;width:100%;';
		style += `background: rgba(0,0,0,${diyComponent.value.componentBgAlpha / 10});`;
		style += `height:${height.value}px;`;

		if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
		if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
		if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
		if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
	}

	return style;
});

const countBorderRadius = (type: any, index: any) => {
	var obj = '';
	if (diyComponent.value.elementAngle == 'right') {
		return obj;
	}
	var defaultData: any = {
		'row1-lt-of2-rt': [
			['border-top-right-radius', 'border-bottom-right-radius'],
			['border-top-left-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'],
			['border-top-left-radius', 'border-bottom-left-radius', 'border-top-right-radius']
		],
		'row1-lt-of1-tp-of2-bm': [
			['border-top-right-radius', 'border-bottom-right-radius'],
			['border-top-left-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'],
			['border-radius'],
			['border-top-left-radius', 'border-bottom-left-radius', 'border-top-right-radius']
		],
		'row1-tp-of2-bm': [
			['border-bottom-left-radius', 'border-bottom-right-radius'],
			['border-top-left-radius', 'border-bottom-right-radius', 'border-top-right-radius'],
			['border-top-left-radius', 'border-bottom-left-radius', 'border-top-right-radius']
		],
		'row2-lt-of2-rt': [
			['border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'],
			['border-top-left-radius', 'border-bottom-right-radius', 'border-bottom-left-radius'],
			['border-top-left-radius', 'border-bottom-right-radius', 'border-top-right-radius'],
			['border-top-left-radius', 'border-bottom-left-radius', 'border-top-right-radius']
		],
		'row1-of4': [
			['border-top-right-radius', 'border-bottom-right-radius'],
			['border-radius'],
			['border-radius'],
			['border-top-left-radius', 'border-bottom-left-radius']
		],
		'row1-of3': [
			['border-top-right-radius', 'border-bottom-right-radius'],
			['border-radius'],
			['border-top-left-radius', 'border-bottom-left-radius']
		],
		'row1-of2': [
			['border-top-right-radius', 'border-bottom-right-radius'],
			['border-top-left-radius', 'border-bottom-left-radius']
		]
	};

	defaultData[type][index].forEach((item: any, index: any) => {
		obj += 'border-top-left-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
		obj += 'border-top-right-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
		obj += 'border-bottom-left-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
		obj += 'border-bottom-right-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
	});
	return obj;
}

watch(
	() => props.pullDownRefreshCount,
	(newValue, oldValue) => {
		// 处理下拉刷新业务
	}
)

onMounted(() => {
	refresh();
	// 装修模式下刷新
	if (diyStore.mode == 'decorate') {
		watch(
			() => diyComponent.value,
			(newValue, oldValue) => {
				if (newValue && newValue.componentName == 'RubikCube') {
					refresh();
				}
			}
		)
	} else {
		watch(
			() => diyComponent.value,
			(newValue, oldValue) => {
				refresh();
			}
		)
	}
});

const instance = getCurrentInstance();
const height = ref(0)

const refresh = () => {
	if (diyStore.mode == 'decorate') {
		diyComponent.value.list.forEach((item: any) => {
			// 装修模式下设置默认图
			if (item.imageUrl == '') {
				item.imgWidth = 690;
				item.imgHeight = 330;
			}
		});
	}
	handleData()
	nextTick(() => {
		const query = uni.createSelectorQuery().in(instance);
		query.select('.rubik-cube').boundingClientRect((data: any) => {
			height.value = data.height;
		}).exec();
	})
}

const handleData = () => {
	var singleRow: any = {
		'row1-of2': {
			ratio: 2,
			width: 'calc((100% - ' + upx2px(diyComponent.value.imageGap * 2) + 'px) / 2)'
		},
		'row1-of3': {
			ratio: 3,
			width: 'calc((100% - ' + upx2px(diyComponent.value.imageGap * 4) + 'px) / 3)'
		},
		'row1-of4': {
			ratio: 4,
			width: 'calc((100% - ' + upx2px(diyComponent.value.imageGap * 6) + 'px) / 4)'
		}
	};

	diyComponent.value.list.forEach((item: any, index: any) => {
		item.pageItemStyle = countBorderRadius(diyComponent.value.mode, index);
	});

	if (singleRow[diyComponent.value.mode]) {
		calcSingleRow(singleRow[diyComponent.value.mode]);
	} else if (diyComponent.value.mode == 'row2-lt-of2-rt') {
		calcFourSquare();
	} else if (diyComponent.value.mode == 'row1-lt-of2-rt') {
		calcRowOneLeftOfTwoRight();
	} else if (diyComponent.value.mode == 'row1-tp-of2-bm') {
		calcRowOneTopOfTwoBottom();
	} else if (diyComponent.value.mode == 'row1-lt-of1-tp-of2-bm') {
		calcRowOneLeftOfOneTopOfTwoBottom();
	}
};

/**
 * 魔方：单行多个，平分宽度
 * 公式：
 * 宽度：屏幕宽度/2，示例：375/2=187.5
 * 比例：原图高/原图宽，示例：322/690=0.46
 * 高度：宽度*比例，示例：187.5*0.46=86.25
 */
const calcSingleRow = (params: any) => {
	uni.getSystemInfo({
		success: res => {
			let maxHeight = 0;

			diyComponent.value.list.forEach((item: any, index: any) => {
				var ratio = item.imgHeight / item.imgWidth;

				let width = res.windowWidth - upx2px(diyComponent.value.margin.both * 2); // 减去左右间距
				if (diyComponent.value.imageGap > 0) {
					width -= upx2px(params.ratio * diyComponent.value.imageGap * 2); // 减去间隙
				}
				item.imgWidth = width / params.ratio;
				item.imgHeight = item.imgWidth * ratio;

				if (maxHeight == 0 || maxHeight < item.imgHeight) maxHeight = item.imgHeight;
			})

			diyComponent.value.list.forEach((item: any, index: any) => {
				item.widthStyle = params.width;
				item.imgHeight = maxHeight;
			});
		}
	})
};

/**
 * 魔方：四方型，各占50%
 */
const calcFourSquare = () => {
	uni.getSystemInfo({
		success: res => {
			let maxHeightFirst = 0;
			let maxHeightTwo = 0;
			diyComponent.value.list.forEach((item: any, index: any) => {
				var ratio = item.imgHeight / item.imgWidth;
				item.imgWidth = res.windowWidth;
				item.imgWidth -= upx2px(diyComponent.value.margin.both * 4);
				if (diyComponent.value.imageGap > 0) {
					item.imgWidth -= upx2px(diyComponent.value.imageGap * 2);
				}
				item.imgWidth = item.imgWidth / 2;
				item.imgHeight = item.imgWidth * ratio;

				// 获取每行最大高度
				if (index <= 1) {
					if (maxHeightFirst == 0 || maxHeightFirst < item.imgHeight) {
						maxHeightFirst = item.imgHeight;
					}
				} else if (index > 1) {
					if (maxHeightTwo == 0 || maxHeightTwo < item.imgHeight) {
						maxHeightTwo = item.imgHeight;
					}
				}
			});
			diyComponent.value.list.forEach((item: any, index: any) => {
				item.imgWidth = 'calc((100% - ' + upx2px(diyComponent.value.imageGap * 2) + 'px) / 2)';
				item.widthStyle = item.imgWidth;
				if (index <= 1) {
					item.imgHeight = maxHeightFirst;
				} else if (index > 1) {
					item.imgHeight = maxHeightTwo;
				}
			});
		}
	});
}

/**
 * 魔方：1左2右
 */
const calcRowOneLeftOfTwoRight = () => {
	let rightHeight = 0; // 右侧两图平分高度
	let divide = 'left'; // 划分规则，left：左，right：右
	if (diyComponent.value.list[1].imgWidth === diyComponent.value.list[2].imgWidth) divide = 'right';
	uni.getSystemInfo({
		success: res => {
			diyComponent.value.list.forEach((item: any, index: any) => {
				if (index == 0) {
					var ratio = item.imgHeight / item.imgWidth; // 获取左图的尺寸比例
					item.imgWidth = res.windowWidth - upx2px(diyComponent.value.margin.both * 4) - upx2px(diyComponent.value.imageGap * 2);
					item.imgWidth = item.imgWidth / 2;
					item.imgHeight = item.imgWidth * ratio;
					rightHeight = (item.imgHeight - upx2px(diyComponent.value.imageGap * 2)) / 2;
					item.imgWidth += 'px';
				} else {
					item.imgWidth = diyComponent.value.list[0].imgWidth;
					item.imgHeight = rightHeight;
				}
			});
		}
	});
}

/**
 * 魔方：1上2下
 */
const calcRowOneTopOfTwoBottom = () => {
	var maxHeight = 0;
	uni.getSystemInfo({
		success: res => {
			diyComponent.value.list.forEach((item: any, index: any) => {

				var ratio = item.imgHeight / item.imgWidth; // 获取左图的尺寸比例
				if (index == 0) {
					item.imgWidth = res.windowWidth - upx2px(diyComponent.value.margin.both * 4);
				} else if (index > 0) {
					item.imgWidth = res.windowWidth - upx2px(diyComponent.value.margin.both * 4) - upx2px(diyComponent.value.imageGap * 2);
					item.imgWidth = item.imgWidth / 2;
				}

				item.imgHeight = item.imgWidth * ratio;

				// 获取最大高度
				if (index > 0 && (maxHeight == 0 || maxHeight < item.imgHeight)) maxHeight = item.imgHeight;

			});
			diyComponent.value.list.forEach((item: any, index: any) => {
				item.imgWidth += 'px';
				item.widthStyle = item.imgWidth;
				if (index > 0) item.imgHeight = maxHeight;
			});
		}
	});
}

/**
 * 魔方：1左3右
 */
const calcRowOneLeftOfOneTopOfTwoBottom = () => {
	uni.getSystemInfo({
		success: res => {
			diyComponent.value.list.forEach((item: any, index: any) => {
				// 左图
				if (index == 0) {
					var ratio = item.imgHeight / item.imgWidth; // 获取左图的尺寸比例
					item.imgWidth = res.windowWidth - upx2px(diyComponent.value.margin.both * 4) - upx2px(diyComponent.value.imageGap * 2);
					item.imgWidth = item.imgWidth / 2;
					item.imgHeight = item.imgWidth * ratio;
				} else if (index == 1) {
					item.imgWidth = diyComponent.value.list[0].imgWidth;
					item.imgHeight = (diyComponent.value.list[0].imgHeight - upx2px(diyComponent.value.imageGap * 2)) / 2;
				} else if (index > 1) {
					item.imgWidth = (diyComponent.value.list[0].imgWidth - upx2px(diyComponent.value.imageGap * 2)) / 2;
					item.imgHeight = diyComponent.value.list[1].imgHeight;
				}
			});

			diyComponent.value.list.forEach((item: any, index: any) => {
				item.imgWidth += 'px';
			});
		}
	});
}
</script>

<style lang="scss">
.rubik-cube {
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	.item {
		text-align: center;
		line-height: 0;
		overflow: hidden;

		.item-image {
			width: 100%;
			max-width: 100%;
			height: 100%;
		}
	}
}

// 一行两个
.rubik-cube .item.row1-of2 {
	box-sizing: border-box;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.rubik-cube .item.row1-of2:nth-child(1) {
	margin-left: 0 !important;
}

.rubik-cube .item.row1-of2:nth-child(2) {
	margin-right: 0 !important;
}

// 一行三个
.rubik-cube .item.row1-of3 {
	box-sizing: border-box;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.rubik-cube .item.row1-of3:nth-child(1) {
	margin-left: 0 !important;
}

.rubik-cube .item.row1-of3:nth-child(3) {
	margin-right: 0 !important;
}

// 一行四个
.rubik-cube .item.row1-of4 {
	box-sizing: border-box;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.rubik-cube .item.row1-of4:nth-child(1) {
	margin-left: 0 !important;
}

.rubik-cube .item.row1-of4:nth-child(4) {
	margin-right: 0 !important;
}

// 两左两右
.rubik-cube .item.row2-lt-of2-rt {
	// width: 50%;
	display: inline-block;
	box-sizing: border-box;
}

.rubik-cube .item.row2-lt-of2-rt:nth-child(1) {
	margin-left: 0 !important;
	margin-top: 0 !important;
}

.rubik-cube .item.row2-lt-of2-rt:nth-child(2) {
	margin-right: 0 !important;
	margin-top: 0 !important;
}

.rubik-cube .item.row2-lt-of2-rt:nth-child(3) {
	margin-left: 0 !important;
	margin-bottom: 0 !important;
}

.rubik-cube .item.row2-lt-of2-rt:nth-child(4) {
	margin-right: 0 !important;
	margin-bottom: 0 !important;
}

// 一左两右
.rubik-cube .template-left,
.rubik-cube .template-right {
	// width: 50%;
	box-sizing: border-box;
}

.rubik-cube .template-left .item.row1-lt-of2-rt:nth-child(1) {
	margin-bottom: 0;
}

.rubik-cube .template-right .item.row1-lt-of2-rt:nth-child(2) {
	margin-bottom: 0 !important;
}

.rubik-cube.row1-lt-of2-rt .template-right {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

// 一上两下
.rubik-cube .item.row1-tp-of2-bm:nth-child(1) {
	width: 100%;
	box-sizing: border-box;
	margin-top: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.rubik-cube .item.row1-tp-of2-bm:nth-child(2) {
	// width: 50%;
	box-sizing: border-box;
	margin-left: 0 !important;
	margin-bottom: 0 !important;
}

.rubik-cube .item.row1-tp-of2-bm:nth-child(3) {
	// width: 50%;
	box-sizing: border-box;
	margin-right: 0 !important;
	margin-bottom: 0 !important;
}

// 一左三右
.rubik-cube .template-left .item.row1-lt-of1-tp-of2-bm {
	width: 100%;
	box-sizing: border-box;
}

.rubik-cube .template-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.rubik-cube .template-bottom .item:nth-child(2) {
	margin-right: 0 !important;
}
</style>
